<template>
  <div class="login">
    <div class="logoSet">
      <img src="./../../public/cloud.jpg" alt class="img" />
      <img src="./../../public/logo.jpg" class="logo" alt="logo" />
    </div>
    <form class="formControl">
      <div class="zhangHao">
        <label>账号:</label>
        <input type="text" v-model="account" placeholder="邮箱/手机号" />
        <p class="accountError" v-show="accountError">账号有误，请重新输入！</p>
        <p class="accountSuccess" v-show="accountSuccess">验证成功！</p>
      </div>
      <div class="password">
        <label>密码:</label>
        <input type="password" v-model="password" placeholder="密码" />
        <p class="passwordError" v-show="passwordError">密码有误，请重新输入！</p>
        <p class="passwordSuccess" v-show="passwordSuccess">验证成功!</p>
      </div>
      <button class="goTo" @click.prevent="test">登录</button>
      <button @click.prevent="reset" class="reset">重置</button>
    </form>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      account: "",
      password: "",
      accountError: false,
      passwordError: false,
      accountSuccess: false,
      passwordSuccess: false,
    };
  },
  methods: {
    test() {
      // 邮箱的验证
      let testInfo = /^(([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5}){1,25})$/;
      // 手机号码验证
      let testPhone = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
      // 密码验证
      let testPassword = /^[a-zA-Z]\w{5,17}$/;
      if (
        testPhone.test(this.account) ||
        (testInfo.test(this.account) && this.account != null)
      ) {
        this.accountSuccess = true;
        this.accountError = false;
      } else {
        this.accountError = true;
        this.accountSuccess = false;
      }
      if (testPassword.test(this.password) && this.password !== null) {
        this.passwordSuccess = true;
        this.passwordError = false;
      } else {
        this.passwordError = true;
        this.passwordSuccess = false;
      }
      while (this.passwordSuccess && this.accountSuccess) {
        this.$router.push("/main").catch(() => {});
        localStorage.setItem("haveLogin", true);
        localStorage.setItem(this.account, "朋友你好，");
        this.$store.commit("loginInfo", this.account);
        break;
      }
    },
    reset() {
      this.password = null;
      this.account = null;
      this.passwordError = false;
      this.accountError = false;
      this.passwordSuccess = false;
      this.accountSuccess = false;
    },
  },
};
</script>

<style lang="less" scoped>
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  font-family: initial;
}
.logoSet {
  .logo {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    top: 27%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px dotted rgb(162, 19, 129);
  }
}
.logo:hover {
  width: 100%;
  height: 100%;
  border-radius: 0;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(0);
  transition: all 5s ease-in-out;
  opacity: 1;
}
.login {
  position: absolute;
  bottom: 1px;
  width: 100%;
  height: 100%;
  .formControl {
    width: 300px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    background: rgba(234, 127, 81, 0.2);
    text-align: center;
    box-shadow: 1px 1px 10px rgb(222, 107, 107);
    .goTo {
      color: rgb(222, 107, 107);
      border: 1px solid rgb(222, 107, 107);
      position: relative;
      top: -240px;
      outline: 0;
      border-radius: 5px;
    }
    .reset {
      color: rgb(222, 107, 107);
      border: 1px solid rgb(222, 107, 107);
      position: relative;
      top: -240px;
      outline: 0;
      border-radius: 5px;
      margin-left: 50px;
    }
    .zhangHao {
      padding-top: 30px;
      font-size: 13px;
      color: rgb(222, 107, 107);
      .accountError {
        font-size: 12px;
        color: red;
        padding-left: 40px;
        padding-top: 5px;
      }
      label {
        padding-right: 13px;
      }
    }
    .password {
      position: relative;
      top: -110px;
      color: rgb(222, 107, 107);
      font-size: 13px;
      .passwordError {
        font-size: 12px;
        color: red;
        padding-left: 40px;
        padding-top: 5px;
      }
      label {
        padding-right: 14px;
      }
    }
    input {
      outline: 0;
      font-size: 10px;
      border-radius: 12px;
      border: 1px solid rgb(223, 93, 93);
      color: rgb(222, 107, 107);
      padding-left: 10px;
    }
  }
}
.accountSuccess,
.passwordSuccess {
  padding-top: 5px;
  padding-left: 200px;
  color: green;
  font-size: 12px;
}
</style>